<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/modalplugin.css">
      <style>
          .box .form{
              height: 40px;
              display:flex;
              justify-content:flex-start;
              align-items:center;
          }

          .box .form span{
            margin-right:3%;
            width:30%;
            text-align:right;
          }

          .box .form input{
              width: 100%;
              padding:0 5px;
              height:30px;
              box-sizing:border-box;
              border:1px solid #eee;
          }
      </style>  
</head>
<body>
    
    <!-- <div class="drag_modal"></div>
    <div class="drag_content">
        <div class="drag_head">
            系统温馨提示
            <a href="javascript:;" class="drag_close"></a>
        </div>
        <div class="drag_main">
            哈哈哈
        </div>
        <div class="drag_foot">
            <a href="javascript:;" class="drag_button">取消</a>
            <a href="javascript:;" class="drag_button">确定</a>
        </div>
    </div> -->

    
    <button id="btn">点我</button>
    <script src="./webpack/dist/modalplugin.min.js"></script>

    <script>
        console.log(window);
        btn.onclick = function(){
            // let m1 = M({ 
            //     drag:true,  // 是否开启拖拽 默认开启
            //     title:"登录",
            //     template :  `<div class="box">
            //         <div class="form">
            //             <span>用户名:</span>
            //             <input type="text" id="username"/> 
            //         </div> 
            //         <div class="form">
            //             <span>密码:</span>
            //             <input type="password" id="password"/> 
            //         </div>
            //     </div>`,
            //     buttons:[
            //         {
            //             text:'取消',
            //             click(self){
            //                 console.log(self);
            //                 self.close();
            //             }
            //         },{
            //             text:'确定',
            //             click(self){
            //                 let username = document.querySelector('#username'),
            //                     password = document.querySelector('#password'); 
            //                 console.log(username.value,password.value);
            //                 self.close();
            //             }   
            //         }
            //     ]
            // })


            let m2 = M({ 
                template:"实现了插件组件封装",
                title:"提示", 
                buttons:[
                    {
                        text:'确定',
                        click(self){  
                            self.close();
                        }   
                    }
                ],
                // 周期函数 [回调函数，用户需要处理的事情都要写在两个回调函数当中]
                onopen:self=>{
                    console.log('已打开',self);
                },
                onclose(){
                    console.log('已关闭',this);
                }
            })

            // 周期函数 发布订阅,可以灵活的给某一个事件订阅自己要执行的方法
            m2.ondragstart.on(self=>{
                console.log('拖拽开始');
            })  
            m2.ondraging.on(self=>{
                console.log('拖拽中');
            }) 
            m2.ondragend.on(self=>{
                console.log('拖拽结束');
            }) 
        }
    </script>
</body>
</html>